/**
 * 创建三角形角标
 *
 * @param {Object} options - 配置选项
 * @param {number} [options.size=100] - 主容器尺寸(px)，一般不小于50px；
 * @param {string} [options.text='text'] - 显示的文本
 * @param {number} [options.textSize=60] - 文本框尺寸(px)，默认 60%
 * @param {number} [options.arrowSize=50] - 角标的尺寸(px)，默认 50%
 * @param {string} [options.color='red'] - 角标的颜色
 * @param {number} [options.opacity=0.5] - 角标的透明度
 * @returns {HTMLElement} 返回创建的DOM元素
 */
const createTriangularMark = (options = {}) =>{
    // 合并默认选项和传入选项
    const {
        size = 100,
        textSize = size * 0.6,
        arrowSize = size / 2,
        content = 'text',
        color = 'red',
        opacity = 0.5
    } = options;

    // 创建主容器
    const container = document.createElement('div');
    container.style.width = `${size}px`;
    container.style.height = `${size}px`;

    // 创建文本框
    const textBox = document.createElement('div');
    textBox.style.position = 'absolute';
    textBox.style.top = '0';
    textBox.style.right = '0';
    textBox.style.width = `${textSize}px`;
    textBox.style.height = `${textSize}px`;
    textBox.style.lineHeight = `${textSize}px`;
    textBox.style.textAlign = 'center';
    textBox.innerHTML = content;

    // 创建箭头
    const arrow = document.createElement('i');
    arrow.className = 'arrow';
    arrow.style.position = 'absolute';
    arrow.style.top = '0';
    arrow.style.right = '0';
    arrow.style.width = '0';
    arrow.style.height = '0';
    arrow.style.content = "''";
    arrow.style.opacity = opacity.toString();
    arrow.style.borderLeft = `${arrowSize}px solid transparent`;
    arrow.style.borderRight = `${arrowSize}px solid ${color}`;
    arrow.style.borderTop = `${arrowSize}px solid ${color}`;
    arrow.style.borderBottom = `${arrowSize}px solid transparent`;

    // // 添加方法以便后续修改参数
    // container.updateOptions = function(newOptions) {
    //     const updatedOptions = { ...options, ...newOptions };
    //
    //     // 更新样式
    //     container.style.width = `${updatedOptions.size}px`;
    //     container.style.height = `${updatedOptions.size}px`;
    //
    //     textBox.style.width = `${updatedOptions.textSize}px`;
    //     textBox.style.height = `${updatedOptions.textSize}px`;
    //     textBox.style.lineHeight = `${updatedOptions.textSize}px`;
    //     textBox.textContent = updatedOptions.text;
    //
    //     arrow.style.opacity = updatedOptions.arrowOpacity.toString();
    //     arrow.style.borderLeft = `${updatedOptions.arrowSize}px solid transparent`;
    //     arrow.style.borderRight = `${updatedOptions.arrowSize}px solid ${updatedOptions.arrowRightColor}`;
    //     arrow.style.borderTop = `${updatedOptions.arrowSize}px solid ${updatedOptions.arrowTopColor}`;
    //     arrow.style.borderBottom = `${updatedOptions.arrowSize}px solid transparent`;
    //
    //     // 更新内部存储的选项
    //     Object.assign(options, updatedOptions);
    // };

    // 组装组件
    container.appendChild(arrow);
    container.appendChild(textBox);
    return container;
}

/**
 * 递归获取组件的 ZIndex
 *
 * @param element {HTMLElement}
 * @returns {number}
 */
const getZIndex = (element) => {
    let index = getComputedStyle(element).zIndex;
    if (index !== 'auto') {
        return index;
    }

    let p = element.parentNode;
    while (true) {
        if (p === undefined || p === null) {
            return -1;
        } else {
            index = getComputedStyle(element).zIndex;
            if (index !== 'auto') {
                return index;
            }
        }
        p = p.parentNode;
    }
}

/**
 * 包含 dom 相关的各类操作
 */
export default {
    getZIndex, createTriangularMark
}